<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-form ref="form" :model="pageAjax.data" label-width="120px">
              <el-form-item label="请选择平台">
                <el-cascader
                  v-model="pageAjax.data.platformId"
                  :props="orgCascaderCp.config.props"
                  :options="orgSupAjax.data"
                  disabled
                >
                </el-cascader>
              </el-form-item>
              <div class="mi-upload">
                <div class="mi-title">
                  平台图标
                </div>

                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div class="m-file" v-if="pageAjax.data.platformIcon">
                      <div
                        class="m-operation flex item-v-center item-h-center"
                      ></div>
                      <img :src="pageAjax.data.platformIcon" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <el-form-item label="招募标准：">
                <el-input
                  placeholder="请输入招募标准"
                  type="textarea"
                  disabled
                  v-model="pageAjax.data.recruitMark"
                ></el-input>
              </el-form-item>

              <el-form-item label="直播时长：">
                <el-input
                  placeholder="请输入直播时长"
                  disabled
                  type="textarea"
                  v-model="pageAjax.data.broadcastTime"
                ></el-input>
              </el-form-item>
              <el-form-item label="待遇：">
                <el-input
                  placeholder="请输入待遇"
                  disabled
                  type="textarea"
                  v-model="pageAjax.data.treatment"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="rBack">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getH5docDetail } from "@/api/channel.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_channelH5docDetail",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      data: {
        broadcastTime: "",
        platformIcon: "",
        platformId: 0,
        platformName: "",
        recruitMark: "",
        treatment: ""
      }
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },

    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    }
  }),
  created() {
    let _that = this;

    _that.getOrgData().then(() => {
      _that.getPageData();
    });
  },
  methods: {
    getPageData() {
      let _that = this;

      return getH5docDetail({ params: { id: _that.$route.query.id } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    getOrgData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.wantPlatformList) || [];
        _that.orgSupAjax.orginData = _.cloneDeep(arr);
        // 去掉全部
        for (var i = arr.length; i--; ) {
          if (arr[i].id == 0) {
            arr.splice(i, 1);
            break;
          }
        }

        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },
    rBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
    }
    .m-files {
    }
    .m-file {
      position: relative;
      float: left;
      width: 150px;
      height: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
    }
    .m-addBtn {
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      font-size: 28px;
      color: #ebeef5;
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
}
</style>
